<template>
  
  <scroll-view
    :scroll-top="scrollTop"
    scroll-y="true"
    class="scroll-Y"
    @scrolltoupper="upper"
    @scrolltolower="lower"
    @scroll="scroll"
    v-if="invitationMsgList.length>0&&invitationMsgList!==null"
  >
    <view class="invite-info-borad" v-for="item in invitationMsgList">
      <view class="invite-info">
        <view class="detail">
          队伍名称：{{ item.teamInfo.name }}
        </view>
        <view class="detail">
          邀请时间：{{ item.invitationTime }}
        </view>
        <view class="detail">
          邀请人：{{ item.user.username }}
        </view>
        <view class="detail">
          消息状态：{{ item.isRead===true?'已处理':'未处理' }}
        </view>
      </view>
      <van-button type="info" :disabled="item.isRead===true?true:false" style="line-height: 100px;" :class="[item.isRead===false? 'btn':'']" @click="dealMsg(item.teamInfo.id)">处理</van-button>
    </view>
  </scroll-view>
  <van-empty image="search" description="还没有组队消息" v-else />
  <van-notify id="van-notify" />
</template>

<script setup>
// import { uni } from '@dcloudio/uni-h5';
import { ref,watch,onMounted } from 'vue'
import {onShow} from "@dcloudio/uni-app"
import {getUnReadMsg,markReadMsg,joinTeam} from '../../api/team/team'
import useStore from '../../store/index'

const scrollTop = ref(0)
const old = ref({
  scrollTop: 0,
})
const invitationMsgList=ref([])
//获取未读消息
const getUnReadMessage=async ()=>{
  const res=await getUnReadMsg()
  console.log(res);
  if(res.code===40100){
    //未登录先登录
    uni.switchTab({
      url:'/pages/person/person'
    })
  }
  
}
//处理消息
const dealMsg=(teamId)=>{
  uni.showModal({
	title: '提示',
	content: '是否加入该队伍',
	success:  async (res)=> {
		if (res.confirm) {
			console.log('用户点击确定');
      const obj={
        password:'',
        teamId:teamId
      }
      const joinRes=await joinTeam(obj)
      console.log('加入队伍结果：'+joinRes);
      
      uni.showToast({
        title:'加入成功',
        icon:'success'
        
      })
		} else if (res.cancel) {
			console.log('用户点击取消');
		}
	},
  complete:async ()=>{
    const res=await markReadMsg(teamId)
    console.log("标记请求结果："+res);
    useStore().team().getInvitationMsg()
    
  }
});
}

watch(()=>useStore().team().invitationMsgList,(newVal,oldVal)=>{
  console.log("newVal",newVal);
  console.log("oldVal",oldVal);
  invitationMsgList.value=newVal
  
  
})
onShow(()=>{
  // getUnReadMessage()
 invitationMsgList.value= useStore().team().INVITATIONMSGLIST
 console.log(invitationMsgList.value);
 const Authorization = uni.getStorageSync("Authorization");
  if (!Authorization) {
            uni.switchTab({
              url: "/pages/person/person",
              success: () => {
                uni.showToast({
                  title: '请先登录',
                  icon: 'none'
                });
              }
            });
            // 阻止进一步的跳转操作
            
          }

})
onMounted(()=>{
  
})
</script>

<style scoped>
  .scroll-Y {
		height: 100vh;
	}
  .scroll-view-item {
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
		font-size: 36rpx;
	}
  .box{
    border: 1px solid;
  }
  .invite-info-borad{
    /* height: 100px; */
    
    margin: 10px 10px 0 10px;
    background-color: #f4f7f9;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    /* border: 1px solid; */
  }
  .invite-info{
    /* width: 100%; */
    /* height: 100%; */
    line-height: 33px;
  }
  .btn{
    /* line-height: 100px; */
    
    position: relative;
  }
  .btn::after{
    content: '';
    position: absolute;
    top: 68px;
    right: -4px;
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #cc463d;
  }
</style>
